<template>
  <div class="cq-footer">
    <div class="w1160">
      <div class="cq-foot-content flex flex-between">
        <div class="cq-foot-contact">
          <div class="cq-contact-tel icon icon-tel">
            <p class="c-fff fz22 lh24">400-096-0828</p>
            <span class="c-d2 fz14">7*24小时客服为您服务</span>
          </div>
          <div class="cq-qr-wrap">
            <img
              class="cq-foot-qr"
              src="@/assets/img/cq-qr.png"
              width="159"
              height="159"
              alt="二维码"
            />
            <p class="c-d2 no-wrap lh12">微信扫描二维码，关注【橙券】</p>
          </div>
        </div>
        <div class="cq-foot-connect flex">
          <dl>
            <dt>橙品牌</dt>
            <dd><a href="#">橙营销</a></dd>
            <dd><a href="#">橙营销</a></dd>
            <dd><a href="#">橙营销</a></dd>
            <dd><a href="#">橙营销</a></dd>
          </dl>
          <dl>
            <dt>橙品牌</dt>
            <dd><a href="#">橙营销</a></dd>
            <dd><a href="#">橙营销</a></dd>
            <dd><a href="#">橙营销</a></dd>
          </dl>
          <dl>
            <dt>橙品牌</dt>
            <dd><a href="#">橙营销</a></dd>
            <dd><a href="#">橙营销</a></dd>
            <dd><a href="#">橙营销</a></dd>
            <dd><a href="#">橙营销</a></dd>
            <dd><a href="#">橙营销</a></dd>
          </dl>
          <dl>
            <dt>橙品牌</dt>
            <dd><a href="#">橙营销</a></dd>
            <dd><a href="#">橙营销</a></dd>
            <dd><a href="#">橙营销</a></dd>
            <dd><a href="#">橙营销</a></dd>
            <dd><a href="#">橙营销</a></dd>
          </dl>
        </div>
      </div>
      <p class="cq-archival">©20xx xxxxxx有限公司 鲁ICP备130xxxx号-2xx</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'cq-footer'
}
</script>

<style lang="scss" scoped>
.cq-footer {
  background-color: #22212f;
  padding-top: 55px;
}

.cq-foot-contact {
  width: 229px;
  padding: 0 60px 0 65px;
  border-right: 1px solid #4c4f5f;
}

.cq-qr-wrap {
  padding: 0 35px;
}

.cq-foot-qr {
  padding: 20px 0 15px 0;
}

.cq-foot-content {
  position: relative;
  padding-bottom: 18px;
}

.cq-foot-connect {
  overflow: hidden;
  width: 804px;
  max-height: 245px;
  padding-left: 94px;
}

.cq-foot-connect dl {
  width: 188px;
}

.cq-foot-connect dl dt {
  padding-bottom: 30px;
  color: #fff;
  font-size: 16px;
  line-height: 16px;
}

.cq-foot-connect dl dd {
  padding-left: 3px;
  font-size: 14px;
  line-height: 34px;
}

.cq-foot-connect dl a {
  color: #cecece;
}

.cq-foot-content:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -120px;
  width: 1400px;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.1),
    #4c4f5f,
    rgba(0, 0, 0, 0.1)
  );
}

.cq-archival {
  text-align: center;
  color: #7e8088;
  font-size: 14px;
  line-height: 60px;
}
</style>
